<template>
  <view class="app-content">
    <!-- 导航栏 -->
    <uni-nav-bar
      ref="navBar"
      status-bar="true"
      left-icon="person-filled"
      right-icon="scan"
      background-color="#253155"
      color="white"
      :shadow="false"
      :right-margin="capsuleLeft"
      title="IoTechn"
      @clickLeft="$refs.drawer.open()"
      @clickRight="scanNewDevice"
    />
    <!-- 抽屉 -->
    <uni-drawer ref="drawer" :visible="profileVisible" width="375">
      <view v-if="hasLogin" class="profile-group">
        <view class="avatar">
          <view class="avatar-item" :style="{'background-image' : 'url(' + (userInfo.avatarUrl ? userInfo.avatarUrl : 'https://unimall-asset.oss-cn-beijing.aliyuncs.com/noavatar.png') + ');'}" />
        </view>
        <view class="nickname">
          {{ userInfo.nickname ? userInfo.nickname : '无昵称' }}
        </view>
      </view>
      <navigator v-else class="profile-group" url="/pages/public/login" hover-class="none">
        <view class="avatar">
          <view class="avatar-item" style="background-image: url(https://unimall-asset.oss-cn-beijing.aliyuncs.com/noavatar.png);" />
        </view>
        <view class="nickname">
          立即登录
        </view>
      </navigator>
      <view class="btn-group">
        <view class="btn">
          个人资料
        </view>
        <view class="divline" />
        <view class="btn">
          添加设备
        </view>
        <view class="divline" />
        <view class="btn">
          开源地址
        </view>
        <view class="divline" />
        <view class="btn">
          关于我们
        </view>
        <view v-if="hasLogin" class="divline" />
        <view v-if="hasLogin" class="btn" @click="logout">
          退出登录
        </view>
      </view>
    </uni-drawer>
    <!-- 主页内容 通过阅读navBar源码得知，他就是44绝对高度 + statusBar高度 -->
    <scroll-view :style="[{height: 'calc(100%-' + (44 + statusBarHeight) + 'px)'}]">
      <view class="content" :style="'grid-template-columns: repeat(' + lineNum + ' , ' + parseInt(100 / lineNum) +'%)'">
        <view v-for="(item,index) in deviceList" :key="index" class="device-item" @click="toDevice(item)">
          <image class="device-img" :src="item.img" />
          <view class="device-title">
            {{ item.title }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import {
  mapState
} from 'vuex'
export default {
  components: { uniDrawer, uniNavBar },
  data() {
    return {
      statusBarHeight: this.$api.config.sysInfo.statusBarHeight,
      // #ifdef MP
      capsuleLeft: this.$api.config.sysInfo.screenWidth - this.$api.config.capsule.left,
      // #endif
      // #ifndef MP
      capsuleLeft: 0,
      // #endif
      lineNum: 4,
      // 个人信息弹窗
      profileVisible: false,
      listQuery: {
        pageNo: 1,
        pageSize: 15
      },
      total: 0,
      deviceList: [

      ]
    }
  },
  computed: {
    ...mapState(['hasLogin', 'userInfo'])
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const that = this
      that.$api.request('device', 'listDevices', that.listQuery, undefined, false)
        .then(res => {
          that.deviceList = res.data.items
          that.total = res.data.total
        })
    },
    scanNewDevice() {
      const that = this
      uni.scanCode({
        success: function(res) {
          console.log('条码类型：' + res.scanType)
          console.log('条码内容：' + res.result)
          that.$api.request('device', 'bindDevice', {
            accessKeyId: res.result
          }).then(res => {
            if (res.data === 'ok') {
              that.$api.msg('添加设备成功！')
            } else if (res.data === 'wait') {
              that.$api.msg('等待设备管理员审核！')
            }
            that.getList()
          })
        }
      })
    },
    toDevice(device) {
      uni.navigateTo({
        url: '/pages/controller/index?pid=' + device.productId + '&did=' + device.deviceId
        // url: '/pages/render/index?id=1'
      })
    },
    logout() {
      const that = this
      uni.showModal({
        title: '退出',
        content: '您确认要退出登录吗?',
        confirmColor: '确认',
        cancelText: '取消',
        success(e) {
          if (e.confirm) {
            that.$store.commit('logout')
            that.$api.request('user', 'logout')
          }
        }
      })
    }
  }
}
</script>

<style>

   .profile-group {
      background-color: #47484C;
      padding-bottom: 50rpx;
   }

   .avatar {
      padding-top: 130rpx;
   }

   .avatar-item {
      width: 100rpx;
      height: 100rpx;
      border-radius: 80rpx;
      background-size: 80rpx;
      margin: 0px auto;
   }

   .nickname {
      margin-top: 32rpx;
      display: flex;
      justify-content: center;
      color: white;
   }

   .btn-group {
      width: 100%;
      height: 100%;
      background-color: #47484C;
   }

   .btn-group .btn {
      color: white;
      text-align: center;
      line-height: 100rpx;
   }

   .btn-group .divline {
      height: 1px;
      background: radial-gradient(white -50%, #47484C 100%);
      width: 80%;
      margin: 0px auto;
   }

   .content {
      width: 100%;
      display: grid;
   }

   .device-item {
      margin: 10rpx;
      border-radius: 15rpx;
      background: rgba(0,0,0,0.1);
      text-align: center;
      padding: 15rpx 0;

   }

   .device-img {
      width: 80rpx;
      height: 80rpx;
      margin: 0px auto;
   }

   .device-title {
      color: white;
   }

</style>
